<template>
  <div class="home" v-title data-title="用车帮助">
    <div class="nav">
      <ul >
        <router-link to='./helpPage1' tag="li" active-class='active'>
          <p class="border-right">如何使用2个轮子？</p>
          <div class="solid"><i></i></div>
        </router-link>
        <router-link to='./helpPage2' tag="li" active-class='active'>
          <p class="border-right">如何使用4个轮子？</p>
          <div class="solid"><i></i></div>
        </router-link>
      </ul>
    </div>
    <div class="module">
      <transition name="fade">
      <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
  }
</script>

<style scoped >
  @import "../styles/styles.css";
  .nav{
    position: relative;
    width: 100%;
    height:1.12rem;
  }
  .nav ul{
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    height:0.7rem;
  }
  .nav ul li{
    float:left;
    width: 3.2rem;
    height:100%;
    margin-left:0.43rem;
    border-radius:0.15rem 0.15rem 0 0;
    background: #f4f4f4;
  }
  .nav ul li:nth-child(2){
    margin-left:0.25rem;
  }
  .nav  li p{
    width: 100%;
    height:100%;
    line-height: 0.7rem;
    text-align: center;
    font:0.28rem/0.7rem "Microsotf Yahei";

    color:#666;
  }
  .nav li.active p{
    font-weight: 600;
    color:#333;
  }
  .module{
    background: #f4f4f4;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.2s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>
